import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      username: "",
      password: "",
      isAgree: true,
      hobbies: [
        { value: "sing", text: "唱", isChecked: false },
        { value: "dance", text: "跳", isChecked: false },
        { value: "rap", text: "rap", isChecked: false },
      ],
      fruit:["banana"],
      intro:"哈哈哈"
    };
  }
  handleSubmitClick(event) {
    // 1.阻止默认行为
    event.preventDefault();
    // 2.获取到所有的表单数据，对数据进行组建
    console.log("获取表单内容", this.state);
    const hobbies = this.state.hobbies.filter(item => item.isChecked ).map(item => item.value)
    console.log(hobbies)
  }
  handleInputChange(e) {
    this.setState({
      isAgree: e.target.checked,
    }); 
  }
  handleHobbiesChangeChange(e,index){
    const hobbies= [...this.state.hobbies]
    hobbies[index].isChecked = e.target.checked
    this.setState({hobbies})
    
  }
  handleChange(e) {
    console.log(e);
    this.setState({ [e.target.name]: e.target.value });
  }
  handleFruitChange(e){
    console.log(e.target.selectedOptions);
    const options = Array.from(e.target.selectedOptions)
    const values = options.map(item => item.value)
    console.log(values);

    this.setState({ fruit: values });
    // 额外补充:Array.from (可迭代对象)
    // Array.from(arguments)
   const values2 =  Array.from(e.target.selectedOptions, item => item.value )
   console.log(values2);

  }
  render() {
    const { username, password, isAgree, hobbies, fruit } = this.state;
    return (
      <div>
        <form onSubmit={(e) => this.handleSubmitClick(e)}>
          <label htmlFor="username">
            用户：
            <input
              id="username"
              onChange={(e) => this.handleChange(e)}
              value={username}
              type="text"
              name="username"
            />
          </label>
          <label htmlFor="password">
            密码：
            <input
              id="password"
              onChange={(e) => this.handleChange(e)}
              value={password}
              type="text"
              name="password"
            />
          </label>
          {/* 2.checkbox */}
          <label htmlFor="agree">
            <input
              type="checkbox"
              checked={isAgree}
              onChange={(e) => this.handleInputChange(e)}
              name="agree"
              id="agree"
            />
            同意协议
          </label>

          {/* 3.checkbox 多选 */}
          <div>您的爱好：</div>
          {hobbies.map((item,index) => {
            return (
              <label key={item.value} htmlFor={item.value}>
                <input
                  type="checkbox"
                  id={item.value}
                  checked={item.isChecked}
                  onChange={(e) => this.handleHobbiesChangeChange(e,index)}
                />
                {item.text}
              </label>
            );
          })}
           {/* 4，select */}
           <div>
            <select value={fruit} onChange={e=>this.handleFruitChange(e)} multiple>
                <option value="apple">苹果</option>
                <option value="orange">橘子</option>
                <option value="banana">香蕉</option>
            </select>
           </div>
          

          <button type="submit">提交</button>
        </form>
      </div>
    );
  }
}

export default App;
